import {
  Body,
  Button,
  Container,
  Content,
  Header,
  Icon,
  Left,
  Right,
  Text,
  Title,
  View
} from "native-base";
import React, { Component } from "react";
import {
  NavigationScreenConfigProps,
  NavigationStackScreenOptions
} from "react-navigation";
import { connect } from "react-redux";
import { Dispatch } from "redux";
import { ActionDestroy, Actions } from "./action";
import { State } from "./reducer";

interface IStateProps {
  headerTitle: string;
}

interface IDispatchProps {
  destroy: () => void;
}

const mapStateToProps = (state: State): IStateProps => ({
  headerTitle: state.headerTitle
});

const mapDispatchToProps = (dispatch: Dispatch<Actions>): IDispatchProps => ({
  destroy: () => dispatch({ ...new ActionDestroy() })
});

class SearchScreenBasic extends Component<
  IStateProps & IDispatchProps & NavigationScreenConfigProps
> {
  static navigationOptions: NavigationStackScreenOptions = {
    headerTitle: "头条搜索"
  };

  render() {
    const { navigate, goBack } = this.props.navigation;
    const title = SearchScreenBasic.navigationOptions.headerTitle || "";

    return (
      <Container>
        <Header style={{ backgroundColor: "#d43d3d" }}>
          <Left>
            <Button transparent>
              <Icon
                name="arrow-back"
                onPress={() => {
                  goBack();
                }}
              />
            </Button>
          </Left>
          <Body>
            <Title>{title}</Title>
          </Body>
          <Right />
        </Header>
        <Content>
          <Button
            primary
            full
            onPress={() => {
              /* navigate('Main')*/
              goBack();
            }}
          >
            <Text>go to main</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

const SearchScreen = connect(
  mapStateToProps,
  mapDispatchToProps
)(SearchScreenBasic);

export default SearchScreen;
